<template>
    <van-nav-bar :title="isLogin ? '登录' : '注册'" left-arrow @click-left="router.replace('/home')" />
    <div class="container">
        <!-- 头像 -->
        <div class="user_img">
            <img src="https://w.wallhaven.cc/full/p9/wallhaven-p98xkp.jpg" />
        </div>
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="formInfo.name" name="name" label="用户名" placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]" />
                <van-field v-model="formInfo.password" type="password" name="password" label="密码" placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
                <van-field v-if="!isLogin" v-model="formInfo.avatar" type="url" name="avatar" label="头像"
                    placeholder="图片地址" disabled :rules="[
                        { required: true, message: '请填写图片地址' },
                    ]" />
                <van-field v-if="!isLogin" name="sex" label="性别">
                    <template #input>
                        <van-radio-group v-model="formInfo.sex" direction="horizontal">
                            <van-radio :name="1">男</van-radio>
                            <van-radio :name="0">女</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <van-field v-if="!isLogin" v-model="formInfo.sign" type="text" name="sign" label="签名" placeholder="个性签名"
                    :rules="[{ required: true, message: '请填写个性签名' }]" />
                <van-field v-if="!isLogin" v-model="formInfo.secretAnswer" type="text" name="secret_answer" label="密保"
                    placeholder="验证密保" :rules="[{ required: true, message: '请填写密保' }]" />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block :type="isLogin ? 'success' : 'primary'" native-type="submit">
                    {{ isLogin? '登录': '注册' }}
                </van-button>
                <van-button class="registerBtn" round block :type="isLogin ? 'primary' : 'default'"
                    @click="isLogin = !isLogin">
                    {{ isLogin? '注册': '返回登录' }}
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script setup>
import { login, register } from '@/api/user'
import { ref } from 'vue'
import { showNotify } from 'vant';
import { setToken } from '@/utils/token.js'
import { useRouter } from 'vue-router'
import useUserInfo from '@/stores/useUserInfo'
import useCartInfo from '@/stores/useCartInfo'


let isLogin = ref(true)
let router = useRouter()
let store = useUserInfo()
let storeCart = useCartInfo()

let formInfo = ref({
    name: '',
    password: '',
    avatar: "https://w.wallhaven.cc/full/p9/wallhaven-p98xkp.jpg",
    sex: 1,
    sign: "",
    secretAnswer: "",
})

let onSubmit = async (value) => {
    if (isLogin.value) {
        //登录逻辑
        let res = await login(value)
        showNotify({ type: 'success', message: '登录成功' });
        setToken(res.data.token, res.data.expire_in)
        store.setUserInfo({
            name: value.name,
            avatar: res.data.avatar,//头像
            sex: res.data.sex,//性别，
            sign: res.data.sign,//简介
        })

        storeCart.getCartInfo()
        // 跳转至首页
        router.replace('/home')
    } else {
        await register(value)
        showNotify({
            type: 'success',
            message: '注册成功',
            duration: 1500,
            onClose: () => {
                isLogin.value = true
                formInfo.value.password = ''
            }
        });
    }

}
</script>

<style lang="scss" scoped>
.container {
    margin-top: 40px;

    .user_img {
        height: 100px;
        padding-top: 58px;
        margin-bottom: 28px;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
            width: 88px;
            height: 88px;
            border-radius: 50%;
            object-fit: cover;
        }
    }

    .registerBtn {
        margin-top: 12px;
    }
}
</style>